import { DislikeFilled, DislikeOutlined, LikeFilled, LikeOutlined } from '@ant-design/icons';
import { Avatar, Comment, Tooltip } from 'antd';
import React, { createElement, useState } from 'react';
import axios from 'axios'

const Actions = (props, ref) => {
  var tmp_likes = props.item.likes
  var tmp_dislikes = props.item.dislikes

  const li= null;
 
  const [likes, setLikes] = useState(tmp_likes);
  const [dislikes, setdisLikes] = useState(tmp_dislikes);

  var store = window.localStorage
 
  const request = axios.create({
    baseURL: "http://localhost:8080",
  });
 
  var likecount=likes;

  const [action, setAction] = useState(null);
  const like = (item) => {
    console.log(item)
    var user = store.getItem("UserName")
    var vote_data = {
      "username": user,
      "id": item.id,
      "type": true,
    }
    request.post('/api/vote', vote_data).then(
      res => {
        setAction('liked')
        tmp_likes = tmp_likes + 1
        setLikes(tmp_likes)
      }
    )
  };

  const dislike = (item) => {
    var user = store.getItem("UserName")
    var vote_data = {
      "username": user,
      "id": item.id,
      "type": false,
    }
    request.post('/api/vote', vote_data).then(
      res => {
        setAction('disliked')
        tmp_dislikes = tmp_dislikes + 1
        setdisLikes(tmp_dislikes)
      }
    )
  };
  const actions = [
    <Tooltip key="comment-basic-like" title="Like">
      <span onClick={() => like(props.item)}>
      
        {createElement(action === 'liked' ? LikeFilled : LikeOutlined)}
        <span className="comment-action">{likes}</span>
      </span>
    </Tooltip>,
   <Tooltip key="comment-basic-dislike" title="Dislike">
   <span onClick={() => dislike(props.item)}>
     {React.createElement(action === 'disliked' ? DislikeFilled : DislikeOutlined)}
     <span className="comment-action">{dislikes}</span>
   </span>
 </Tooltip>,
 
  ];
  return (
    <Comment
      actions={actions}
    />
  );
};
export default Actions;